$i: 10;
@while $i > 0 {
  .border-#{$i} {
    border: #{$i}px solid var(--border-color-primary);
   }
   @each $dir in l, r, b, t, lr, tb {
    .border-#{$dir}-#{$i} {

      @if $dir == l {
        border-left: #{$i}px solid var(--border-color-primary);
      }

      @if $dir == r {
        border-right: #{$i}px solid var(--border-color-primary);
      }

      @if $dir == t {
        border-right: #{$i}px solid var(--border-color-primary);
      }

      @if $dir == b {
        border-right: #{$i}px solid var(--border-color-primary);
      }

      @if $dir == lr {
        border-left: #{$i}px solid var(--border-color-primary);
        border-right: #{$i}px solid var(--border-color-primary);
      }

      @if $dir == tb {
        border-top: #{$i}px solid var(--border-color-primary);
        border-bottom: #{$i}px solid var(--border-color-primary);
      }
     }
   }
  $i: $i - 1;
}
